<template>
  <view class="container">
    <view class="header">
      <text class="title">网络安全科普系统</text>
      <text class="reload !text-12px" @click="getData()">刷新</text>
    </view>

    <view class="content-wrapper">
      <!-- 左侧分类导航 -->
      <scroll-view class="category-nav" scroll-y>
        <view
          class="category-item"
          v-for="(category, index) in categories"
          :key="category.id"
          :class="{ active: activeCategory === index }"
          @tap="switchCategory(index)"
        >
          <text>{{ category.name }}</text>
        </view>
      </scroll-view>

      <!-- 右侧内容区域 -->
      <scroll-view class="content-area" scroll-y>
        <view class="content-list">
          <view
            class="content-item"
            v-for="item in filteredItems"
            :key="item.KnowledgeID"
            @click="showDetail(item)"
          >
            <image
              class="item-face"
              :src="
                item.CoverImage ||
                'https://api.gamestrial.com/image/network_security.png'
              "
              mode="aspectFill"
            ></image>
            <text class="item-text truncate" v-if="item.Title">
              {{ item.Title }}
            </text>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { getAllKnowledgeApi } from './service'

interface Category {
  id: number
  name: string
}

@Component
export default class Index extends Vue {
  activeCategory = 0

  categories: Category[] = [
    { id: 0, name: '全部' },
    { id: 1, name: '人脸识别' },
    { id: 2, name: '安全认证' },
    { id: 3, name: '数据加密' },
    { id: 4, name: '网络防护' }
  ]

  items: any[] = [
    // {
    //   KnowledgeID: 1,
    //   Title: '哈哈哈',
    //   Content: '',
    //   Category: '',
    //   AuthorID: '',
    //   CreateTime: '',
    //   CoverImage: ''
    // }
  ]

  get filteredItems(): any[] {
    if (this.activeCategory === 0) {
      return this.items
    }
    return this.items
      .filter(
        (item) => +item.Category === +this.categories[this.activeCategory].id
      )
      .map((j) => {
        return {
          ...j,
          Category: this.categories[j.Category].name
        }
      })
  }

  showDetail(item: any) {
    uni.setStorageSync('knowledgeDetail', item)
    uni.navigateTo({
      url: `./detail?id=${item.id}`
    })
  }
  // 切换分类
  switchCategory(index: number): void {
    this.activeCategory = index
    // this.getData()
  }

  async getData() {
    const { records } = await getAllKnowledgeApi({
      Category:
        this.activeCategory === 0
          ? ''
          : encodeURIComponent(this.categories[this.activeCategory].id)
    })
    console.log(' records', records)
    this.items = records || []
  }
  async onLoad() {
    await this.getData()
  }
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

.header {
  padding: 20px;
  color: white;
  background-image: url('https://api.gamestrial.com/image/network_security.png');
  display: flex;
  align-items: center;
  justify-content: space-between;

  .title {
    font-size: 20px;
    font-weight: bold;
    display: block;
  }
  .reload {
    font-size: 12px;
    font-weight: bold;
    display: block;
  }

  .subtitle {
    font-size: 14px;
    opacity: 0.8;
  }
}

.content-wrapper {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.category-nav {
  width: 100rpx;
  background-color: #f0f0f0;
  border-right: 2rpx solid #ddd;

  .category-item {
    padding: 26rpx 20rpx;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;

    &.active {
      background-color: #1976d2;
      color: white;
      font-weight: bold;
    }
  }
}

.content-area {
  flex: 1;
  padding: 20rpx;
}

.content-list {
  display: flex;
  flex-wrap: wrap;
  grid-template-columns: repeat(2, fr);
  gap: 20rpx;

  .content-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30rpx;
    background-color: white;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
    max-width: 48%;

    .item-face {
      width: 240rpx;
      height: 240rpx;
      border-radius: 120rpx;
      margin-bottom: 8rpx;
    }

    .item-text {
      font-size: 28rpx;
      color: #333;
      width: 100%;
      text-align: center;
    }
  }
}
</style>
